import { Spin } from 'antd';
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import TopTools from './TopTools';
import Workbook from './Workbook';
import QuickTableDrawer from './QuickTableDrawer';
import { loadSpread, releaseSpread } from '../../../utils/loadSpread';
import TemplateBrowser from '../../dialog/templateBrowser';
import DataSourceDialog from '../../dialog/data-source-dialog';
import AceEditorDialog from '../../dialog/custom-formula-dialog';
import FieldProps from './field-props';
import FieldAssignDialog from '../../dialog/FieldAssignDialog';
import FormatterSettingDialog from "../../dialog/DataFormatterDialog";

import './index.less';
import CodeEditor from './code';
@inject('edcExcelDesignerStore')
@observer
export default class EdcExcel extends React.Component {
    componentWillMount() {
        const { edcExcelDesignerStore: store, params, readonly } = this.props;
        store.appid = params.appid;
        this.t = loadSpread(store.loadWorkbook.bind(store, readonly));
    }
    componentWillUnmount() {
        releaseSpread(this.t);
    }
    render() {
        const { edcExcelDesignerStore: store } = this.props;
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@kwt1up`} spinning={!store.isInit || store.loading} size="large" wrapperClassName="wea-edc-excel-spin">
                <div className="wea-edc-excel-wrapper">
                    <CodeEditor ecId={`${this && this.props && this.props.ecId || ''}_CodeEditor@cbbmfk`} store={store.codeEditorStore} designerStore={store}></CodeEditor>
                    {store.isInit &&
                        [<TopTools ecId={`${this && this.props && this.props.ecId || ''}_TopTools@2xer5c@$toptools`}
                            importFile={store.importFile}
                            onChange={store.changeCellStyle}
                            changeFormatpainter={store.changeFormatpainter}
                            changeSheetAutoFit = {store.changeSheetAutoFit}
                            {...store.activeCellStyle}
                            expandCell={store.expandCell}
                            newPage = {store.newPage}
                            onChangeCellType={store.changeCellType}
                            setFillInData={store.setFillInData}
                            setSelectFillIn={store.setSelectFillIn}
                            browserAutoFillin={store.browserAutoFillin}
                            addDetailTable={store.addDetailTable}
                            addCustomTable={store.addCustomTable}
                            addNoDetailTable={store.addNoDetailTable}
                            clearContent={store.clearContent}
                            browserTemplate={store.templateBrowserStore.open}
                            signFields={store.autoSignFields}
                            disabledSignFields={store.disabledSignFields}
                            setCellTypeProps={store.setCellTypeProps}
                            readonly={store.readonly}
                            deleteTableDisabled={store.deleteTableDisabled}
                            clearFieldDisabled={store.clearFieldDisabled}
                            deleteTable={store.deleteTable}
                            setFieldTypeDisabled={store.setFieldTypeDisabled}
                            isAutoFillin={store.isAutoFillin}
                            isAutoFillinDisabled={store.isAutoFillinDisabled}
                            setAutoFillin={store.setAutoFillin}
                            dataSourceList={store.dataSourceList.slice()}
                            autoFitSheetMap={store.autoFitSheetMap}
                            sheetAutoFit={store.sheetAutoFit}
                            formulaList={store.aceEditorStore.formulaList}
                            fieldAssignList={store.fieldAssignList.slice()}
                            formulaVisible ={store.aceEditorStore.formulaVisible}
                            cusCodeVisible ={store.aceEditorStore.cusCodeVisible}
                            addDataSource={store.addDataSource}
                            openDataSource={store.openDataSource}
                            deleteDataSource={store.deleteDataSource}
                            addFieldAssign={store.addFieldAssign}
                            isformatpainter={store.isformatpainter}
                            openFieldAssign={store.openFieldAssign}
                            deleteFieldAssign={store.deleteFieldAssign}
                            dsMenuVisible={store.dataSourceStore.dsMenuVisible}
                            dsShowMenu={store.dataSourceStore.dsShowMenu}
                            faMenuVisible={store.fieldAssignStore.faMenuVisible}
                            faShowMenu={store.fieldAssignStore.faShowMenu}
                            openAceEditor={store.aceEditorStore.openAceEditor}
                            showContent={store.aceEditorStore.showContent}
                            deleteFormula={store.aceEditorStore.deleteFormula}
                            commonChildCheckParams={toJS(store.commonChildCheckParams)}

                            gridlineVisible={store.gridlineVisible}
                            setGridline={store.setGridline}
                            rowColHeaderVisible={store.rowColHeaderVisible}
                            setRowColHeaderVisible={store.setRowColHeaderVisible}
                            setBackGroundImage={store.setBackGroundImage}
                            setBackGroundImageLayout={store.setBackGroundImageLayout}
                            toggleFormatterSettingDialog={store.toggleFormatterSettingDialog}
                        />,
                        <div style={{ height: 'calc(100% - 100px)', position:'relative' }}>
                            <Workbook ecId={`${this && this.props && this.props.ecId || ''}_Workbook@cvtwoi@$workbook`} store={store} />
                            {store.isInit && !store.loading && store.fieldProps && <FieldProps ecId={`${this && this.props && this.props.ecId || ''}_FieldProps@s5fbuv@`} store={store}></FieldProps>}
                        </div>,
                        <QuickTableDrawer ecId={`${this && this.props && this.props.ecId || ''}_QuickTableDrawer@fnfll7`} store={store} />
                        ]
                    }
                </div>
                <TemplateBrowser ecId={`${this && this.props && this.props.ecId || ''}_TemplateBrowser@ea3z57`} store={store.templateBrowserStore} onChange={store.loadTemplate} exportExcel={store.exportExcel}></TemplateBrowser>
                <DataSourceDialog ecId={`${this && this.props && this.props.ecId || ''}_DataSourceDialog@9liku0`} store={store.dataSourceStore}></DataSourceDialog>
                <FieldAssignDialog ecId={`${this && this.props && this.props.ecId || ''}_FieldAssignDialog@kuel90`} store={store.fieldAssignStore}></FieldAssignDialog>
                <AceEditorDialog ecId={`${this && this.props && this.props.ecId || ''}_AceEditorDialog@3n9h51`} store={store.aceEditorStore}></AceEditorDialog>

                <FormatterSettingDialog ecId={`${this && this.props && this.props.ecId || ''}_FormatterSettingDialog@y4gylq`}
                    visible={store.formatterSettingVisible}
                    toggleVisible={store.toggleFormatterSettingDialog}
                    onOk={store.setFormatter}
                    getSheet={store.getActiveSheet}
                />

            </Spin>
        )
    }
}